import React, { Component } from 'react'
import { flushSync } from 'react-dom'
function Hello(props) {
  return <h2>{props.message}</h2>
}
export class App extends Component {

  constructor(props){
    super(props)

    this.state={
      message: "跨越光年，归来任是你。 --臆影",
      counter:0
    }
  }
  textChange () {
    // 宏任务
    setTimeout(()=>{
      // 在react18之前,setTimeout中setState操作,是同步操作
      // 在react18之后,setTimeout中setState操作,是异步操作(批处理)
      flushSync(()=>{
        this.setState({message: "嘿嘿"})
      })
      console.log(this.state.message)
    },0)
  }

  counterChange(){
   
  }
  render() {
    const {message,counter} = this.state
    return (
      <div>

        <div><h1>message:</h1></div>
        <div>
          <h2>{message}</h2>
        </div>
        <button onClick={e=>this.textChange()}>修改文本</button>
        <h2>counter:{counter}</h2>
        <button onClick={e=>this.counterChange()}>counter + 1</button>

        <Hello message={message}></Hello>
      </div>
    )
  }
}

export default App